<template>
  <div class="detailBaseInfo" v-if="Object.keys(goods).length !==0">
      <div class="infoTitle">
          {{goods.title}}
      </div>
      <div class="infoPrice">
          <span class="newPrice">{{goods.newPrice}} </span>
          <span class="oldPrice">{{goods.oldPrice}} </span>
          <span class="discount" v-if='goods.discount'
            :style="'background:'+goods.discountBC"
          >{{goods.discount}} </span>
      </div>
      <div class="infoOther flex f-b ">
          <span>{{goods.columns[0]}} </span>
          <span>{{goods.columns[1]}} </span>
          <span>{{goods.services[goods.services.length-1].name}} </span>
      </div>
      <div class="infoService flex f-a">
          <div class="infoServiceItem"
            v-for="n in (goods.services.length-1)" :key="n"
          >
            <img :src="goods.services[n-1].icon" alt="">
            <span>{{goods.services[n-1].name}} </span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'detailBaseInfo',
    props:['goods']
}
</script>

<style scoped>
.infoTitle{
    font-size: 25px;
    padding:0px 10px;
}
.infoPrice{
    margin:20px 0;
    padding:0px 10px;
}
.newPrice{
    font-size: 25px;
    color:rgb(250, 84, 112);
    padding:0 5px
}
.oldPrice{
    text-decoration: line-through;
    color:rgb(90, 89, 87);
    padding:0 5px
}
.discount{
    display: inline-block;
    padding: 5px;
    margin-left: 2px;
    border-radius: 10px;
    transform: translateY(-30%);
    color:#fff;
}
.infoOther{
    box-shadow: 0 1px 2px rgb(197, 195, 195);
    margin-bottom: 20px;
    height: 30px;
    font-size: 20px;
    padding:0px 10px;
    color:rgb(90, 89, 87);
}
.infoService{
    font-size: 15px;
    padding:5px 0px;
    border-bottom: 5px solid rgb(223, 222, 222);
    height: 40px;
    
}
.infoService img{
    width: 20px;
    
}
</style>